<template>
  <el-dialog width="100%"
 
    :title="'仪表盘'"
    :close-on-click-modal="false"
    :visible.sync="visible">
  <el-button type="primary"  style="margin-bottom:10px" @click="createPanel(editableTabsValue)" round>新建仪表盘</el-button>
  
  <el-tabs  v-model="editableTabsValue" type="card" @tab-click="handleClick" closable  :disable-transitions="false"
  @tab-remove="removeTab">
      <!-- <el-tab-pane label="仪表盘一" name="first">用户管理</el-tab-pane>
      <el-tab-pane label="仪表盘二" name="second">配置管理</el-tab-pane> -->

      <el-tab-pane  lazy v-for="(item) in tabs" :key="item.name" :name="item.name" :label="item.label">
        <!-- {{item.value}} -->
        <!-- <div v-if="testif2(item)">sssssss</div> -->
          <!-- <div v-if="testif2(item)">55555555555</div> -->
          <!-- <div v-if="'2' === editableTabsValue">3333333333333333</div> -->
        <!-- <div v-if="testif2(item)">666666666666666</div> -->
          <el-row :gutter="20">
            <el-col :span="24">
              <el-card>
                <div id="J_chartPieBox"  class="chart-box"></div>
              </el-card>
              <!-- <div v-if="'2' === editableTabsValue">3333333333333333</div> -->
            </el-col>
          </el-row>
        </el-tab-pane>


          <el-tab-pane label="仪表盘三" name="second">

              <el-row :gutter="20">
                <el-col :span="24">
                  <el-card>
                  
                     <div id="J_chartBarBox" class="chart-box"></div>
                  </el-card>
                  <!-- <div v-if="'2' === editableTabsValue">3333333333333333</div> -->
                </el-col>
              </el-row>
        </el-tab-pane>

          </el-tab-pane>
    </el-tabs>


    <el-select v-model="value1"  placeholder="横坐标选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>

  <el-select v-model="value2" placeholder="纵坐标选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>


  <el-select v-model="value3" placeholder="统计方式">
    <el-option
      v-for="item in statistics"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>


  <el-select v-model="value4" placeholder="图表选择">
    <el-option
      v-for="item in dias"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>


  <el-select v-model="value5" placeholder="排序">
    <el-option
      v-for="item in sort"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

  <el-button type="primary"  style="margin-bottom:10px" @click="genarate">生成</el-button>
  <el-button type="primary"  style="margin-bottom:10px" @click="saveShow">保存</el-button>
  <!-- <el-button type="primary"  style="margin-bottom:10px" @click="test">测试</el-button>
 <el-button type="primary"  style="margin-bottom:10px" @click="test2">测试2</el-button> -->





    <span slot="footer" class="dialog-footer">
      <el-button @click="closeHandler">取消</el-button>
      <el-button type="primary" >确定</el-button>
    </span>
     <!-- <div @click="onTestClick">gggggggggg</div> -->
  </el-dialog>
 
</template>

<script>
  import echarts from 'echarts';
  export default {
    data () {
      return {
      editableTabsValue: '1',
       horizontal: [],
       vertical: [],
      options: [{   
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],

        pipeLineOption:
        {
          backgroundColor: '#2c343c',
          title: {
            text: 'Customized Pie',
            left: 'center',
            top: 20,
            textStyle: {
              color: '#ccc'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          visualMap: {
            show: false,
            min: 80,
            max: 600,
            inRange: {
              colorLightness: [0, 1]
            }
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: '55%',
              center: ['50%', '50%'],
              data: [
                { value: 335, name: '直接访问' },
                { value: 310, name: '邮件营销' },
                { value: 274, name: '联盟广告' },
                { value: 235, name: '视频广告' },
                { value: 400, name: '搜索引擎' }
              ].sort(function (a, b) { return a.value - b.value }),
              roseType: 'radius',
              label: {
                normal: {
                  textStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                  }
                }
              },
              labelLine: {
                normal: {
                  lineStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                  },
                  smooth: 0.2,
                  length: 10,
                  length2: 20
                }
              },
              itemStyle: {
                normal: {
                  color: '#c23531',
                  shadowBlur: 200,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              animationType: 'scale',
              animationEasing: 'elasticOut',
              animationDelay: function (idx) {
                return Math.random() * 200
              }
            }
          ]
        },

        pipeData: [
                { value: 335, name: '直接访问' },
                { value: 310, name: '邮件营销' }
        ],

        chartLineOption:
      {
          'title': {
            'text': '折线图堆叠'
          },
          'tooltip': {
            'trigger': 'axis'
          },
          'legend': {
            'data': [ '邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎' ]
          },
          'grid': {
            'left': '3%',
            'right': '4%',
            'bottom': '3%',
            'containLabel': true
          },
          'toolbox': {
            'feature': {
              'saveAsImage': { }
            }
          },
          'xAxis': {
            'type': 'category',
            'boundaryGap': false,
            'data': [ '周一', '周二', '周三', '周四', '周五', '周六', '周日' ]
          },
          'yAxis': {
            'type': 'value'
          },
          'series': [
            {
              'name': '邮件营销',
              'type': 'line',
              'stack': '总量',
              'data': [ 120, 132, 101, 134, 90, 230, 210 ]
            },
            {
              'name': '联盟广告',
              'type': 'line',
              'stack': '总量',
              'data': [ 220, 182, 191, 234, 290, 330, 310 ]
            }
          ]
        },

        sort:[
            {
                value: '1',
                label: '升序'
              }, {
                value: '2',
                label: '降序'
              }
        ],

        statistics:[
             {
                value: '1',
                label: '总和'
              }, {
                value: '2',
                label: '平均值'
              }, {
                value: '3',
                label: '最大值'
              }
        ],
        dias:[
             {
                value: '1',
                label: '柱状图'
              }, {
                value: '2',
                label: '饼图'
              }, {
                value: '3',
                label: '折线图'
              }
            ],
      rowOptions: [],
      columnOptions: [],
        value1: '',
        value2: '',
        value: '',
        value3: '',
        value4: '',
        value5: '',
        tabs:[
          {"name":"1","label":"仪表盘一","value":"","aaa":1},
          {"name":"2","label":"仪表盘二","value":'',"aaa":2}
        ],
        chartLine: null,
        chartPie:  null,
        chartBar: null,
        activeName: 'first',
        index: 0,
        multipleSelection: [],
        visible: false,
        dataForm: {
          id: 0,
          tableName: '',
          bPId: '',
          columnName: ''
        },
        tabIndex: 1,
        tableNames: [],
        selectedTables: [],
        dataId: '',
        transfers: [],
        tableColumns: [],
        selectedColumnsData: [],
        row: [],
        cols: [{
            prop: 'date',
            label: '日期'
          },
          {
            prop: 'name',
            label: '姓名'
          },
          {
            prop: 'address',
            label: '地址'
          },
        ]
      }
    },

    mounted () {
      // this.initChartLine()
      //  setTimeout(() => {
      //     this.initChartLine();
      // }, 500);
    },

    activated () {
      if (this.chartLine) {
        this.chartLine.resize()
      }
    },

    
    created () {
      console.log("123");
    },

    methods: {
       removeTab(targetName) {
        let allTabs = this.tabs;
         let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          allTabs.forEach((tab, index) => {
            if (allTabs.name === targetName) {
              let nextTab = allTabs[index + 1] || allTabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }

        this.editableTabsValue = activeName;
        this.tabs = allTabs.filter(tab => tab.name !== targetName);
        
      },
      getColumns(dataId){
          this.$http({
            url: this.$http.adornUrl(`/report/datapackage/info/${this.dataId}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({data}) => {
            if (data && data.code === 0) {
              let columns=data.dataPackage.columnName.split(',');
              this.options=[];
             // this.rowOptions=[];
            //  this.options=[ {
            //     value: '选项4',
            //     label: '龙须面'
            //   }, {
            //     value: '选项5',
            //     label: '北京烤鸭'
            //   }];
              columns.map( item => {
                  let showData={};
                  showData['value']=item;
                  showData['label']=item;

                  // let showData2={};
                  // showData2['value']=item;
                  // showData2['label']=item;

                  // this.rowOptions.push(showData);
                  this.options.push(showData);
              });

             // debugger;
              // let arr=data.dataPackage.columnName.split(",");
              // arr.forEach((item,index)=>{
              //       for(let i=0;i<this.tableColumns.length;i++){
              //         if(item==this.tableColumns[i].columnName){
              //           this.row.push(this.tableColumns[i]);
              //         }
              //       }
              // })
              // this.row.forEach(row => {
              //   this.$refs.multipleTable.toggleRowSelection(row);
              // });
            }
          })
      },

      
      testif(item){
        if(item.aaa==1){
          return true;
        }
      },

      testif2(item){
        if(item.aaa==2){
          return true;
        }
      },

            // 柱状图
      initChartBar () {
        var option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '百度', '谷歌', '必应', '其他']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '直接访问',
              type: 'bar',
              data: [320, 332, 301, 334, 390, 330, 320]
            },
            {
              name: '邮件营销',
              type: 'bar',
              stack: '广告',
              data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
              name: '联盟广告',
              type: 'bar',
              stack: '广告',
              data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
              name: '视频广告',
              type: 'bar',
              stack: '广告',
              data: [150, 232, 201, 154, 190, 330, 410]
            },
            {
              name: '搜索引擎',
              type: 'bar',
              data: [862, 1018, 964, 1026, 1679, 1600, 1570],
              markLine: {
                lineStyle: {
                  normal: {
                    type: 'dashed'
                  }
                },
                data: [
                  [{ type: 'min' }, { type: 'max' }]
                ]
              }
            },
            {
              name: '百度',
              type: 'bar',
              barWidth: 5,
              stack: '搜索引擎',
              data: [620, 732, 701, 734, 1090, 1130, 1120]
            },
            {
              name: '谷歌',
              type: 'bar',
              stack: '搜索引擎',
              data: [120, 132, 101, 134, 290, 230, 220]
            },
            {
              name: '必应',
              type: 'bar',
              stack: '搜索引擎',
              data: [60, 72, 71, 74, 190, 130, 110]
            },
            {
              name: '其他',
              type: 'bar',
              stack: '搜索引擎',
              data: [62, 82, 91, 84, 109, 110, 120]
            }
          ]
        }
        this.chartBar = echarts.init(document.getElementById('J_chartBarBox'))
        this.chartBar.setOption(option)
        window.addEventListener('resize', () => {
          this.chartBar.resize()
        })
      },

            // 饼状图
      initChartPie () {
        var option = {
          backgroundColor: '#2c343c',
          title: {
            text: 'Customized Pie',
            left: 'center',
            top: 20,
            textStyle: {
              color: '#ccc'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          visualMap: {
            show: false,
            min: 80,
            max: 600,
            inRange: {
              colorLightness: [0, 1]
            }
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: '55%',
              center: ['50%', '50%'],
              data: [
                { value: 335, name: '直接访问' },
                { value: 310, name: '邮件营销' },
                { value: 274, name: '联盟广告' },
                { value: 235, name: '视频广告' },
                { value: 400, name: '搜索引擎' }
              ].sort(function (a, b) { return a.value - b.value }),
              roseType: 'radius',
              label: {
                normal: {
                  textStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                  }
                }
              },
              labelLine: {
                normal: {
                  lineStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                  },
                  smooth: 0.2,
                  length: 10,
                  length2: 20
                }
              },
              itemStyle: {
                normal: {
                  color: '#c23531',
                  shadowBlur: 200,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              animationType: 'scale',
              animationEasing: 'elasticOut',
              animationDelay: function (idx) {
                return Math.random() * 200
              }
            }
          ]
        }
        this.chartPie = echarts.init(document.getElementById('J_chartPieBox'))
        this.chartPie.setOption(this.pipeLineOption)
        window.addEventListener('resize', () => {
          this.chartPie.resize()
        })
      },

      initChartLine () {

        this.chartLine = echarts.init(document.getElementById('J_chartLineBox'))
        this.chartLine.setOption(this.chartLineOption)
        window.addEventListener('resize', () => {
          this.chartLine.resize()
        })
      },

      createPanel(targetName){
          this.index++
        
          let newTabName = ++this.tabIndex + '';

          this.tabs.push({
            title: 'New Tab',
            name: `新建仪表盘${newTabName}`,
            label: 'New Tab content'
        });
         this.editableTabsValue = newTabName;

         // let panel={"name":`新建仪表盘${this.index}`,"label":"新建仪表盘","value":"配置管理"};
         // this.tabs.push(panel);  
      },

      closeHandler(){
        this.visible = false 
        this.rowOptions=[];
        this.columnOptions=[];
        this.options=[];
        
        this.value1='';
        this.value2='';
        this.value='';
        this.value3='';
        this.value4='';
        this.value5='';
        if(this.chartLine){
          this.chartLine.clear();
        }
       
      },

       handleClick(tab, event) {
         console.log(123);
         this.editableTabsValue = tab.name;
        //console.log(tab, event);
        // if(this.chartLine){
        //   this.chartLine.clear();
        //   this.chartLine = echarts.init(document.getElementById('J_chartLineBox'))
        //   this.chartLine.setOption(this.chartLineOption)
        //   window.addEventListener('resize', () => {
        //     this.chartLine.resize()
        //   })
        // }


      },

      init (id) {
        this.visible = true;
        this.dataId=id;
        this.getColumns(this.dataId);

        // setTimeout(() => {
        //   this.initChartLine();
        //     this.chartLine.resize()
        // }, 1000);

        // this.$nextTick(() => {
        //    this.initChartLine();
        // })

      },
      // 表单提交
      dataFormSubmit () {
      },

      test(){

        this.initChartBar();
        // this.chartPie = echarts.init(document.getElementById('J_chartPieBox'))

        // this.chartPie.setOption({
        //     title: { text: '在Vue中使用echarts' },
        //     tooltip: {},
        //     xAxis: {
        //         data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        //     },
        //     yAxis: {},
        //     series: [{
        //         name: '销量',
        //         type: 'bar',
        //         data: [5, 20, 36, 10, 10, 20]
        //     }]
        // })
        // window.addEventListener('resize', () => {
        //   this.chartPie.resize()
        // })
      },

      test2(){
       this.chartLine = echarts.init(document.getElementById('J_chartLineBox'))
       //this.chartLine.setOption('');
        this.chartLine.clear();
      },

      saveShow(){
          this.$http({
            url: this.$http.adornUrl(`/report/panelpackage/save`),
            method: 'post',
            data: this.$http.adornData({
              'horizontalfield': this.value1,
              'verticalfield': this.value2,
              'staticstype': this.value3,
              "showtype": this.value4,
              "dataid":  this.dataId
            }
            )
          }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
      },

      genarate(){
        //console.log("sssss",this.value1);

          let myHorizontal=[];
          let myVertical=[];

          this.$http({
            url: this.$http.adornUrl(`/report/datapackage/render`),
            method: 'post',
            data: this.$http.adornData({
              'horizontal': this.value1,
              'vertical': this.value2,
              'statisticsPattern': this.value3,
              "diagram": this.value4,
              "dataId":  this.dataId,
              "sort": this.value5
            }
            )
          }).then(({data}) => {
            data.columns.forEach((item,index)=>{
              myHorizontal.push(item[this.value1]+'月');
              myVertical.push(item[this.value2]);
            //1,2,3
            })

            
              this.chartPie = echarts.init(document.getElementById('J_chartPieBox'))

              this.chartPie.setOption({
                  title: { text: '在Vue中使用echarts' },
                  tooltip: {},
                  xAxis: {
                      data: myHorizontal
                  },
                  yAxis: {},
                  series: [{
                      name: '销量',
                      type: 'bar',
                      data: myVertical
                  }]
              })
              window.addEventListener('resize', () => {
                this.chartPie.resize()
              })


          })

          //   console.log("ssss: ",myHorizontal);
          //   console.log("ssss22: ",myVertical);
          //   debugger;
          //   let b=["03","04","05"];
          //   let bb=["258.0","368.0","334.0"];

          // console.log("ssss3333: ",bb);





      }
    }
  }
</script>
<style>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .right{
    float: right;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
    /* border-right: 8px solid white;
    margin-right: 10px; */
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    /* text-align: center;
    line-height: 160px; */
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

      .chart-box {
      min-height: 400px;
    }
</style>
